<template lang="html">
    <div :class="$style.logPanel">
        <el-col
            :span="24"
            align="center"
        >
            <el-table
                ref="logTable"
                :data="logPaginationData"
                stripe
                highlight-current-row
                style="width: 100%"
            >
                <el-table-column
                    property="id"
                    label="#"
                    align="center"
                    width="40"
                />
                <el-table-column
                    property="username"
                    label="用户名"
                    align="center"
                />
                <el-table-column
                    property="ip"
                    label="操作的IP"
                    align="center"
                    sortable
                />
                <el-table-column
                    property="type"
                    label="类型"
                    align="center"
                    sortable
                />
                <el-table-column
                    property="content"
                    label="详细内容"
                    align="center"
                />
                <el-table-column
                    label="所有参数"
                    align="center"
                >
                    <template
                        slot-scope="scope"
                    >
                        <div v-show="scope.row.params!=''">
                            <el-tooltip
                                style="margin-top:4px"
                                effect="dark"
                                :content="scope.row.params"
                                placement="top"
                            >
                                <div>{{ scope.row.params==""?"":"···" }}</div>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column
                    property="create_time"
                    label="创建时间"
                    align="center"
                    sortable
                    :formatter="formatterTime"
                />
            </el-table>
            <div :class="$style.pagination">
                <el-pagination
                    :page-sizes="[5, 10, 20, 50]"
                    :page-size="logListPerPage"
                    :total="logListTotal"
                    :current-page="logListCurrentPage"
                    layout="total, sizes, prev, pager, next, jumper"
                    @current-change="current_change"
                    @size-change="logListSizeChange"
                />
            </div>
        </el-col>
    </div>
</template>

<script>
import XEUtils from 'xe-utils/methods/xe-utils'
import objectMethods from 'xe-utils/methods/object'
import arrayMethods from 'xe-utils/methods/array'
import baseMethods from 'xe-utils/methods/base'
import numberMethods from 'xe-utils/methods/number'
import dateMethods from 'xe-utils/methods/date'
import stringMethods from 'xe-utils/methods/string'
import functionMethods from 'xe-utils/methods/function'
import urlMethods from 'xe-utils/methods/url'
import browseMethods from 'xe-utils/methods/browse'

XEUtils.mixin(
    // Object
    objectMethods,
    // Array
    arrayMethods,
    // Base
    baseMethods,
    // Number
    numberMethods,
    // Date
    dateMethods,
    // String
    stringMethods,
    // Function
    functionMethods,
    // URL
    urlMethods,
    // Browse
    browseMethods
)
export default {
    data() {
        return {
            loading: false,
            filterValue: '',
            logDataCache: [],
            logList: [],
            logListTotal: 0,
            logListCurrentPage: 1,
            logListPerPage: 10,
        }
    },
    methods: {
        init() {
            this.getLogList();
        },
        getLogList() {
            // let that = this;
            this.loading = true;
            this.$store.dispatch('getLogList')
                .then(res => {
                    this.loading = false;
                    this.logDataCache = res.data;
                    this.logList = res.data;
                    this.logListTotal = res.data.length;
                }).catch(err => {
                    this.loading = false;
                });
        },
        formatterTime(row, column) {
            // return XEUtils.toDateString(Date.now());
            return XEUtils.toDateString(row.create_time + '000');
        },
        current_change: function(currentPage) {
            this.logListCurrentPage = currentPage;
        },
        logListSizeChange: function(size) {
            this.logListPerPage = size;
        },
    },
    created() {
        this.init();
    },
    computed: {
        logPaginationData: function() {
            console.log(this)
            return this.logList.slice((this.logListCurrentPage - 1) * this.logListPerPage, this.logListCurrentPage * this.logListPerPage)
        }
    }
}
</script>

<style lang="scss" scoped module>
.logPanel {
    padding-top: 10px;
}
</style>
